<template>
    <view class="goods-search">
        <view class="header-wrap">
            <u-sticky offset-top="0" h5-nav-height="0" bgColor="transparent">
                <view class="search">
                    <view class="search-content row-between">
                        <image src="/static/images/lease-ss.png" mode="aspectFit"></image>
                        <input
                            type="text"
                            v-model="keyword"
                            @focus="showHistory = true"
                            :focus="showHistory"
                            @confirm="onSearch"
                            placeholder="搜索你想要的商品"
                        />
                        <text @click="onSearch">搜索</text>
                    </view>
                    <!-- <u-search v-model="keyword" @focus="showHistory = true" :focus="showHistory" @search="onSearch"  height="76" bg-color="#F4F4F4"></u-search> -->
                </view>
                <!-- 	<view v-show="!showHistory" class="header row bg-white">
					<view :class="'tag row-center ' + (comprehensive ? 'primary' : '')" @tap="onNormal">综合</view>
					<view class="tag row-center" data-type="priceSort" @tap="onPriceSort">
						<text :class="priceSort ? 'primary' : ''">价格</text>
						<view>
							<trigonometry direction="up" size="small" :color="priceSort == 'desc' ? '#FF5058' : '#333'">
							</trigonometry>
							<trigonometry size="small" :color="priceSort == 'asc' ? '#FF5058' : '#333'"></trigonometry>
						</view>
					</view>
					<view class="tag row-center" data-type="saleSort" @tap="onSaleSort">
						<text :class="saleSort ? 'primary' : ''">销量</text>
						<view>
							<trigonometry direction="up" size="small" :color="saleSort == 'desc' ? '#FF5058' : '#333'">
							</trigonometry>
							<trigonometry size="small" :color="saleSort == 'asc' ? '#FF5058' : '#333'"></trigonometry>
						</view>
					</view>
					<view class="tag row-center" @tap="changeType">
						<image class="icon-sm" :src=" goodsType === 'one' ? '/static/images/icon_double.png' : '/static/images/icon_one.png'"></image>
					</view>
				</view> -->
            </u-sticky>
        </view>
        <view v-show="showHistory" class="content bg-white">
            <view v-if="hotList.length" class="search-words">
                <view class="title">热门搜索</view>
                <view class="words row wrap">
                    <view
                        v-for="(item, index) in hotList"
                        :key="index"
                        class="item br60 mr20 mb20 lighter sm line1"
                        @tap="onChangeKeyword(item)"
                        >{{ item }}</view
                    >
                </view>
            </view>
            <view v-if="historyList.length" class="search-words">
                <view class="title row-between">
                    <view>历史搜索</view>
                    <view class="xs muted mr20" style="padding: 10rpx 20rpx" @tap="clearSearchFun"
                        >清空</view
                    >
                </view>
                <view class="words row wrap">
                    <view
                        v-for="(item, index) in historyList"
                        :key="index"
                        class="item br60 mr20 mb20 lighter sm line1"
                        @tap="onChangeKeyword(item)"
                        >{{ item }}</view
                    >
                </view>
            </view>
        </view>
        <view v-show="!showHistory" class="content">
            <view class="goods-list">
                <view v-show="goodsType == 'double'" class="double">
                    <lease-goods-list type="double" :list="goodsList"></lease-goods-list>
                </view>
                <view v-show="goodsType == 'one'" class="one">
                    <lease-goods-list :list="goodsList" type="one"></lease-goods-list>
                </view>
            </view>
            <loading-footer :status="status" :slot-empty="true">
                <view slot="empty" class="column-center" style="padding-top: 200rpx">
                    <image
                        class="img-null"
                        :src="getImageUri('/images/user_privilege/ss-null.png')"
                    ></image>
                    <text class="lighter">暂无商品</text>
                </view>
            </loading-footer>
        </view>
    </view>
</template>

<script>
import { getImageUri } from '@/utils/tools'

import { getGoodsSearch, getLeaseGoodsSearch, getSearchpage, clearSearch } from '@/api/store'
import { trottle, loadingFun, getRect } from '@/utils/tools'
import { loadingType } from '@/utils/type'

export default {
    data() {
        return {
            keyword: '',
            status: loadingType.LOADING,
            page: 1,
            goodsType: 'double',
            goodsList: [],
            priceSort: '',
            saleSort: '',
            showHistory: false,
            hotList: [],
            historyList: []
        }
    },

    components: {},
    props: {},
    watch: {
        // 监听属性
        keyword(value, old) {
            if (!value && !this.id) {
                this.showHistory = true
            }
        },
        showHistory(value) {
            if (value) {
                this.getSearchpageFun()
            }
        }
    },
    computed: {
        comprehensive() {
            const { priceSort, saleSort } = this
            if (priceSort == '' && saleSort == '') {
                return true
            }

            return false
        }
    },

    onLoad(options) {
        this.onNormal = trottle(this.onNormal, 500, this)
        this.onPriceSort = trottle(this.onPriceSort, 500, this)
        this.onSaleSort = trottle(this.onSaleSort, 500, this)
        this.onSearch = trottle(this.onSearch, 500, this)
        this.init(options)
    },

    onReachBottom: function () {
        this.getGoodsSearchFun()
    },
    methods: {
        onChange(e) {
            this.keyword = e.value
        },

        changeType() {
            this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
        },

        clearSearchFun() {
            clearSearch().then((res) => {
                if (res.code == 1) {
                    this.getSearchpageFun()
                }
            })
        },

        onNormal() {
            this.priceSort = ''
            this.saleSort = ''
            this.onRefresh()
        },

        onPriceSort() {
            let { priceSort } = this
            this.saleSort = ''
            this.priceSort = priceSort == 'asc' ? 'desc' : 'asc'
            this.onRefresh()
        },

        onSaleSort() {
            let { saleSort } = this
            this.priceSort = ''
            this.saleSort = saleSort == 'desc' ? 'asc' : 'desc'
            this.onSearch()
        },

        init(option) {
            let { id, name, type } = option
            this.type = type
            if (id) {
                uni.setNavigationBarTitle({
                    title: name
                })
                this.id = id
                this.getGoodsSearchFun()
            } else {
                // uni.setNavigationBarTitle({
                // 	title: '搜索'
                // });
                this.showHistory = true
            }
        },

        getSearchpageFun() {
            getSearchpage().then((res) => {
                if (res.code == 1) {
                    let { history_lists, hot_lists } = res.data
                    this.hotList = hot_lists
                    this.historyList = history_lists
                }
            })
        },

        onClear() {
            if (this.id) {
                this.onSearch()
            }
        },
        onSearch() {
            this.onRefresh()
        },
        onRefresh() {
            this.showHistory = false
            this.page = 1
            this.goodsList = []
            this.status = loadingType.LOADING
            this.$nextTick(() => {
                this.getGoodsSearchFun()
            })
        },

        onChangeKeyword(item) {
            this.keyword = item
            this.showHistory = false
            this.onRefresh()
        },

        async getGoodsSearchFun() {
            let { page, goodsList, keyword, priceSort, saleSort, status } = this
            if (status == loadingType.FINISHED) return
            const params = {
                category_id: this.type == 1 ? this.id : '',
                brand_id: this.type == 0 ? this.id : '',
                page_no: page,
                keyword,
                price: priceSort,
                sales_sum: saleSort
            }
            const data = await loadingFun(getLeaseGoodsSearch, page, goodsList, status, params)
            if (!data) return
            this.page = data.page
            this.goodsList = data.dataList
            this.status = data.status
        }
    }
}
</script>
<style lang="scss" scoped>
.goods-search {
    background-color: #fbfbfd;
    .header-wrap {
        .search {
            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
            position: relative;
            z-index: 1;
            padding: 24rpx;
            width: 100%;
            background-color: #fbfbfd;
        }

        .header {
            // margin: 0rpx 20rpx;
            padding: 20rpx;
            .tag {
                height: 100%;
                flex: 1;
            }
        }
    }

    .content {
        .search-words {
            padding-left: 24rpx;
            padding-bottom: 20rpx;
            .title {
                padding: 26rpx 0;
            }

            .words {
                .item {
                    line-height: 52rpx;
                    height: 52rpx;
                    padding: 0 24rpx;
                    background-color: #f5f5f5;
                }
            }
        }

        .goods-list {
            overflow: hidden;
        }
    }
}
.search-content {
    height: 76rpx;
    width: 100%;
    background-color: #ffffff;
    border-radius: 120rpx;
    image {
        width: 40rpx;
        height: 40rpx;
        margin-left: 28rpx;
    }
    input {
        width: 72%;
        background-color: #ffffff;
        color: #000000e6;
    }
    text {
        color: #2482ee;
        padding-left: 20rpx;
        border-left: 1rpx solid #00000010;
        margin-right: 28rpx;
    }
}
</style>
